<template>
    <main-wrap :noFixed="true" bodyBg="none" :bodyStyle="{height:'100%',overflow: 'hidden'}">
        <div class="assetsCon">
            <ul class="incomeList" v-if="assets.goldTotalAmount">
                <li>
                    <div class="total">
                        <img src="/images/zc1.png" alt="">
                        <div class="amount">{{assets.goldTotalAmount.decimalTwoString}}</div>
                    </div>
                    <div class="incTabBox">
                        <div class="item">
                            <p v-t="'assets.text1'">Usable</p>
                            <div class="amount">{{assets.goldAvailableAmount.decimalTwoString}}</div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="total">
                        <img src="/images/zc2.png" alt="">
                        <div class="amount">{{assets.cxtTotalAmount.decimalTwoString}}</div>
                    </div>
                    <div class="incTabBox">
                        <div class="item">
                            <p v-t="'assets.text1'">Usable</p>
                            <div class="amount">{{assets.cxtAvailableAmount.decimalTwoString}}</div>
                        </div>
                        <div class="item">
                            <p v-t="'assets.text2'">Locked</p>
                            <div class="amount">{{assets.cxtFrozenAmount.decimalTwoString}}</div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="total">
                        <img src="/images/zc3.png" alt="">
                        <div class="amount">{{assets.bcxtTotalAmount.decimalTwoString}}</div>
                    </div>
                    <div class="incTabBox">
                        <div class="item">
                            <p v-t="'assets.text1'">Usable</p>
                            <div class="amount">{{assets.bcxtAvailableAmount.decimalTwoString}}</div>
                        </div>
                        <div class="item">
                            <p v-t="'assets.text2'">Locked</p>
                            <div class="amount">{{assets.bcxtFrozenAmount.decimalTwoString}}</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed } from 'vue'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import {toast} from '@/utils/common.js'
import { useI18n } from 'vue-i18n'
export default {
    components:{
        mainWrap
    },
    setup(){
        const store = useStore()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            assets:''
        })

        onMounted(()=>{
            store.dispatch('capital/get_my_assets',{
                walletAddress:state.userInfo.walletAddress
            }).then(res=>{
                state.assets = res.data
            })
        })   

        return {
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
.assetsCon{
    display: flex;
    height: 100%;
    padding: 0 30px 0 0;
    font-family: Inter-Medium, Inter;
    font-weight: 500;
    align-items: center;
    position: relative;
    z-index: 10;
    .incomeList{
        display: flex;
        width: 100%;
        overflow: hidden;
        overflow-x: auto;
        padding: 0;
        margin: 0;
        height: 330px;
        li{
            flex: 1;
            min-width:380px;
            height: 100%;
            background: url(/images/capital/inc1.png) left top no-repeat;
            background-size:100% 100% ;
            padding: 18px 30px;
            &+li{
                margin-left: 15px;
            }
            .total{
                height: 150px;
                width: 100%;
                background: url(/images/capital/zcbg.png) left top no-repeat;
                background-size:100% 100% ;
                line-height: normal;
                text-align: center;
                padding: 20px 10px 0 10px;
                margin: 20px 0 0 0;
                img{
                    display: block;
                    width: 60px;
                    margin: 0 auto;
                }
                .amount{
                    font-size: 32px;
                }
            }
            .incTabBox{
                display: flex;
                margin: 20px 0 0 0;
                .item{
                    flex: 1;
                    height: 100px;
                    text-align: center;
                    p{
                        color: rgba(255,255,255,0.5000);
                        font-size: 22px;
                    }
                    .amount{
                        font-size: 28px;
                    }
                }
            }
        }
    }
}
    
</style>